<template>
	<view class="Creatingcourses-box">
		<u-navbar title="创建校区">
			<view slot="right" style="margin-right: 40upx;font-size: 40upx;font-weight: bold;margin-bottom: 30upx;" @click="getRouter">...</view>
		</u-navbar>
		<view class="Creatingcourses-auto">
			<view style="font-weight: bold;">1、基本信息</view>
			<u-form :model="form" ref="uForm">
				<view class="Course-name">
					<u-form-item label="校区名称" prop="name" label-width="150"><u-input v-model="form.name" placeholder="请输入校区名称" /></u-form-item>
				</view>
				<view class="Course-name">
					<u-form-item label="负责人" prop="name" label-width="150"><u-input v-model="form.name" placeholder="请输入校区负责人的姓名" /></u-form-item>
				</view>
				<view class="Course-name">
					<u-form-item label="联系方式" prop="name" label-width="150"><u-input v-model="form.name" placeholder="请输入校区的练习电话" /></u-form-item>
				</view>
				<view class="classification">
					<u-form-item :label-position="labelPosition" label="所在地区" prop="goodsType" label-width="150">
						<u-input :border="border" type="select" :select-open="selectShow" v-model="form.goodsType" placeholder="请选择课程分类" @click="selectShow = true"></u-input>
						<u-select mode="mutil-column-auto" :list="selectList" v-model="selectShow" @confirm="selectConfirm"></u-select>
					</u-form-item>
				</view>
				<view class="Course-name">
					<u-form-item label="详细地址" prop="name" label-width="150"><u-input v-model="form.name" placeholder="请输入校区的详细地址" /></u-form-item>
				</view>
				<view class="Course-pictures">
					<view>校区环境图</view>
					<view><u-upload :action="action" :file-list="fileList" max-count="1" width="160" height="160"></u-upload></view>
					<view style="color: #999999;">请上传校区的环境图，最多五张，仅支持JPG格式</view>
				</view>
				<view class="Course-introduction">
					<view>2、开设课程</view>
					<view class="kskc" @click="Chooseacourse">
						<view style="color: #999999; background-color: #F7FBFE; padding: 25upx;">
							<view style="text-align: center;font-size: 30upx;"><u-icon name="plus" color="#999999" size="28"></u-icon></view>
							<view style="font-size: 26upx;">选择课程</view>
						</view>
					</view>
				</view>
			</u-form>
		</view>
		<view class="Creatingcourses-bottom" style="margin: 30px 50px;">
			<u-button type="primary" @click="submit">确认</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 演示地址，请勿直接使用
				action: '',
				fileList: [
					// {
					// 	url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
					// }
				],
				form: {
					name: '',
					intro: '',
					goodsType: ''
				},
				selectList: [
					{
						value: 1,
						label: '语言培训',
						children: [
							{
								value: 2,
								label: '成人英语',
								children: [
									{
										value: 3,
										label: '新概念英语'
									},
									{
										value: 4,
										label: '零基础英语'
									}
								]
							},
							{
								value: 5,
								label: '广西',
								children: [
									{
										value: 6,
										label: '南宁'
									},
									{
										value: 7,
										label: '桂林'
									}
								]
							}
						]
					},
					{
						value: 8,
						label: '设计培训',
						children: [
							{
								value: 9,
								label: '网页设计',
								children: [
									{
										value: 10,
										label: 'DW'
									}
								]
							}
						]
					}
				],
				rules: {
					intro: [
						{
							required: true,
							message: '请编辑课程简介'
						},
						{
							min: 5,
							message: '简介不能少于5个字',
							trigger: 'change' ,
						},
						// 正则校验示例，此处用正则校验是否中文，此处仅为示例，因为uView有this.$u.test.chinese可以判断是否中文
						{
							pattern: /^[\u4e00-\u9fa5]+$/gi,
							message: '简介只能为中文',
							trigger: 'change',
						},
					],
					name: [
						{ 
							required: true, 
							message: '请输入课程的名称', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					goodsType: [
						{
							required: true,
							message: '请选择课程分类',
							trigger: 'change',
						}
					],
				},
				border: false,
				selectShow: false,
				radioCheckWidth: 'auto',
				labelPosition: 'left',
				codeTips: '',
				errorType: ['message'],
			}
		},
		onLoad() {
			
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			// 选择商品类型回调
			selectConfirm(e) {
				this.form.goodsType = '';
				e.map((val, index) => {
					this.form.goodsType += this.form.goodsType == '' ? val.label : '-' + val.label;
				})
			},
			Chooseacourse(){
				uni.navigateTo({
					url: '/pages/campus/Choosecourse'
				})
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>
	.kskc{
		height: 328upx;
		border: 3upx dashed #A8D4FA;
		border-radius: 10upx;
		margin-top: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.Course-pictures /deep/ .u-list-item{
		margin: 15px 0;
	}
	.Course-introduction /deep/ .u-form-item__message{
		padding-left: 0 !important;
	}
	.Course-introduction /deep/ .u-form-item{
		background-color: #F7FBFE;
		padding: 15px;
		min-height: 200px;
		margin-top: 15px;
	}
	.Course-introduction /deep/ .u-input__textarea{
		min-height: 150px !important;
		padding: 0 !important;
	}
	.Course-introduction /deep/ .uni-textarea-textarea{
		min-height: 150px;
	}
	.Course-introduction /deep/ .u-border-bottom:after{
		border-bottom-width: 0 !important;
	}
</style>

<style lang="scss" scoped>
	.Creatingcourses-box{
		padding: 30upx;
	}
	.Course-pictures{
		margin-top: 15px;
	}
	.Course-introduction{
		margin-top: 20px;
	}
</style>
